<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/list.css">
    <link rel="stylesheet" href="./font_2615077_l1e0be3xhof/iconfont.css">
    <link rel="stylesheet" href="css/tongyong.css">
    <link rel="stylesheet" href="css/toubu.css">
   
</head>
<body>
<!-- 头 -->     
<div class="tonglan">
    <div class="container header">
        <ul class="yi">     
          
          <li class="off active">
            您好 ! <a href="./login.html">请登录</a>
        </li>
        <li class="on" id="oon">
            您好 ! <span>xxx</span>
           
          </li>
            <li>手机逛淘宝</li>
        </ul>
        <ul class="er">
            <li class="tb">我的淘宝
                <ol>
                    <li>我的足迹</li>
                    <li>我的足迹</li>
                </ol>
            </li>
            <li class="iconfont">&#xe604;购物车</li>
            <li class="iconfont">&#xe629;收藏夹</li>
            <li>商品分类</li>
            <li>免费开店</li>
            <li>千牛卖家中心</li>
            <li>联系客服</li>
            <li class="iconfont" id="last">&#xe626;网站导航
                <div class="d1">
                    <div>
                        <p style="color: red;">主题市场</p>
                        <ul>
                            <li>女装</li>
                            <li>女装</li>                                                    
                            <li>女装</li>
                            <li>女装</li>                 
                            <li>女装</li>
                        </ul>
                        <ul>
                            <li>女装</li>
                            <li>女装</li>                       
                            <li>女装</li>
                        </ul>
                        <ul>
                            <li>女装</li>                     
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                        </ul>
                        <ul>
                            <li>女装</li>                     
                            <li>女装</li>                         
                            <li>女装</li>                          
                          <li>女装</li>
                            <li>女装</li>
                        </ul>                   
                    </div>
                    <div>
                        <p style="color: blue;">精彩推荐</p>
                        <ul>
                            <li>女装</li>
                            <li>女装</li>                                          
                            <li>女装</li>
                        </ul>
                        <ul>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>              
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                        </ul>
                        <ul>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                           <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                        </ul>
                        <ul>
                            <li>女装</li>
                            <li>女装</li>                          
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                        </ul>
                       
                    </div>
                    <div>
                        <p style="color: pink;">特色市场</p>
                        <ul>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>                         
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                        </ul>
                        <ul>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>                         
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                        </ul>
                        <ul>
                            <li>女装</li>
                            <li>女装</li>                         
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                        </ul>
                        <ul>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>                       
                        </ul>
                       
                    </div>
                    <div>
                        <p style="color: purple;">阿里app</p>
                        <ul>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>                        
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                        </ul>
                        <ul>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>                        
                            <li>女装</li>
                            <li>女装</li>
                        </ul>
                        <ul>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>                      
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                        </ul>
                        <ul>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>
                            <li>女装</li>                
                         <li>女装</li>
                            <li>女装</li>
                        </ul>
                       
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
<!-- 第二栏 -->
<div class="search container">
    <div class="gif">
        <img src="./images/gif第二栏.gif" alt="">
    </div>
    <div class="search_box">
        <div class="search_left">
            <p>宝贝</p>
        </div>
        <input type="text" placeholder="短袖潮" class="input">
        <button class="search_right">
            搜索
        </button>
        <ul class="ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>    
</div>
<!-- 第三栏 -->
<div class="box container">
    <div class="category">
      <div class="title">分类信息</div>
      <ul class="clearfix">
        <!-- JS 渲染 -->
      </ul>
    </div>

    <div class="filter">
      <div class="title">
        筛选条件
      </div>
      <ul>
        <li class="filterItem" data-type="hot">热销</li>
        <li class="filterItem" data-type="sale">折扣</li>
      </ul>
    </div>
    <div class="search">
      <div class="title">搜索</div>
      <input type="text">
      <button class="searchBtn">搜索</button>
    </div>
    <div class="sortBox">
      <div class="title">
        排序  
      </div>
      <ul>
        <li class="sortItem" data-type="id" data-method="ASC">综合
          <span class="active"></span>
          <span></span>
        </li>
        <li class="sortItem" data-type="sale" data-method="ASC">折扣
          <span></span>
          <span></span>
        </li>
        <li class="sortItem" data-type="price" data-method="ASC">价格
          <span></span>
          <span></span>
        </li>
      </ul>
    </div>
    <div class="pagination">
      <span class="pageInfo"> 1 / 100 </span>
      <select>
        <option value="12">12</option>
        <option value="16">16</option>
        <option value="20">20</option>
        <option value="24">24</option>
      </select>
      <div class="prev">&lt;</div>
      <div class="next">&gt;</div>
    </div>
  </div>

  <ul class="list container clearFix">
    <li>
      <div class="show">
        <img src="" alt="">
      </div>
      <div class="desc">
        <p class="info">商品描  述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述商品描述</p>
        <p class="price">
          <span class="current">￥ 100.00</span>
          <span class="old">￥ 130.00</span>
        </p>
        <button>直接购买</button>
      </div>
      <span class="tip active">HOT</span>
      <span class="tip active">SALE</span>
    </li>
  </ul>




<script src="../tabs.js"></script>
<script src="../jquery/jquery.min.js"></script>
<script src="./js/list.js"></script>
<script src="./js/base.js"></script>
<script>

</script>
</body>
</html>